<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Scripty2 Notification Queue demo</title>
  <link href="demo.css" rel="StyleSheet"></link> 
  <script type="text/javascript" src="prototype.s2.min.js"></script>
  <script type="text/javascript" src="s2nq.js"></script>
  <script type="text/javascript">
    Event.observe(window, "load", function () {
      document.body.appendChild(window._notificationQueue.domNode);
    });
  
    window._notificationQueue = new fi.internetix.s2nq.NotificationQueue();
  
    function getNotificationQueue() {
      return window._notificationQueue;
    }

    function addInfoMessage(message) {
      getNotificationQueue().addItem(new fi.internetix.s2nq.NotificationQueueItem(message, {
        className: "notificationQueueInfoItem",
        timeout: 1000 * 3
      }));
    }

    function addSuccessMessage(message) {
      getNotificationQueue().addItem(new fi.internetix.s2nq.NotificationQueueItem(message, {
        className: "notificationQueueSuccessItem",
        timeout: 1000 * 3
      }));
    }

    function addWarningMessage(message) {
      getNotificationQueue().addItem(new fi.internetix.s2nq.NotificationQueueItem(message, {
        className: "notificationQueueWarningItem",
        timeout: 1000 * 6
      }));
    }

    function addErrorMessage(message) {
      getNotificationQueue().addItem(new fi.internetix.s2nq.NotificationQueueItem(message, {
        className: "notificationQueueErrorItem"
      }));
    }

    function addCriticalMessage(message) {
      getNotificationQueue().addItem(new fi.internetix.s2nq.NotificationQueueItem(message, {
        className: "notificationQueueCriticalItem"
      }));
    }
    
    function startLoading(message) {
      if (window._loading) {
        addInfoMessage("I'm already loading...");
      } else {
        window._loading = new fi.internetix.s2nq.NotificationQueueItem(message, {
          className: "notificationQueueLoadingItem"
        });
        getNotificationQueue().addItem(window._loading);
      }
    }

    function stopLoading() {
      if (!window._loading) {
        addInfoMessage("I'm not even loading yet...");
      } else {
        window._loading.remove();
        window._loading = null;
      }
    }
  </script>
</head>
<body>
  
  <a href="javascript:addInfoMessage('hello')" style="position: relative; z-index: 9999">Say hello (info class, 3 sec timeout)</a> <br/>
  <a href="javascript:addSuccessMessage('Success!')" style="position: relative; z-index: 9999">Tell me something good (success class, 3 sec timeout)</a> <br/>
  <a href="javascript:addWarningMessage('Beware!')" style="position: relative; z-index: 9999">Warn me (warning class, 6 second timeout)</a><br/>
  <a href="javascript:addErrorMessage('ERRROR !!1')" style="position: relative; z-index: 9999">Report an error (error class, no timeout)</a><br/>
  <a href="javascript:addCriticalMessage('Core Meltdown!!!!! AAaaarGhh!!')" style="position: relative; z-index: 9999">Show me a critical error (error class, no timeout)</a><br/>
  <br/>
  <a href="javascript:startLoading('Loading loading loading...')" style="position: relative; z-index: 9999">Start loading</a><br/>
  <a href="javascript:stopLoading();" style="position: relative; z-index: 9999">Stop loading</a>
   

</body>
</html>